<template>
  <basic-container>
    <el-form
      ref="addForm"
      :model="form"
      label-width="170px"
      label-position="left"
      class="m-l-40"
    >
      <el-form-item label="微信商户号">
        <el-input
          type="input"
          v-model="form.noName"
          size="small"
          placeholder="请输入微信商户号"
        ></el-input>
      </el-form-item>
      <el-form-item label="微信商户api密钥">
        <el-input
          type="input"
          v-model="form.noName"
          size="small"
          placeholder="请输入微信商户api密钥"
        ></el-input>
      </el-form-item>
      <el-form-item label="微信商户API证书序列号">
        <el-input
          type="input"
          v-model="form.noName"
          size="small"
          placeholder="请输入微信商户API证书序列号"
        ></el-input>
      </el-form-item>
      <el-form-item label="API密钥">
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          list-type="picture"
        >
          <el-button size="small" type="text">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <div class="c-red f-s-14">
        说明:<br />
        证书：使用微信退款功能需要上传双向证书。<br />
        证书下载方式：微信商户平台（pay.weixin.qq.com）-->账户中心->账户设置->API安全->证书下载。我们仅用到japiclient_cert.pem和apiclient_key.pem这两个证书<br />
        微信付款：用于微信收款商户中对外付款能力，如：分润账单打款，推广员账单打款、佣金提现等。
      </div>
      <div class="m-t-50"></div>
      <div class="flex-start">
        <el-button type="primary" size="small" plain>取消</el-button>
        <el-button type="primary" size="small">确定</el-button>
      </div>
    </el-form>
  </basic-container>
</template>
<script>
export default {
  data() {
    return {
      form: {},
      fileList: [],
    };
  },

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
  },
};
</script>
